<template>
	<view class='statusBarHeight quicklyPage' v-if='goodsInfo.goodsSessions'>

		<view class="quicklyHeaderImage">
			<view class="navigation_bar">
				<view style='display: flex; align-items: center;'>
					<uni-icons type="back" size="24" color="#fff" @click='GoBack'></uni-icons>
				</view>
			</view>
			<view class="quicklyPageTime">
				<view class="quicklyPageTime-item">
					<view class="label">
						流转时间
					</view>
					<view class="value" v-if='goodsInfo.goodsSessions'>
						当天{{goodsInfo.goodsSessions.beginTime}}-{{goodsInfo.goodsSessions.endTime}}
					</view>
				</view>
				<view class="quicklyPageTime-item" v-if='goodsInfo.goodsSessions'>
					<view class="label">
						易货时间
					</view>
					<view class="value">
						当天{{goodsInfo.goodsSessions.appointBeginTime}}-{{goodsInfo.goodsSessions.appointEndTime}}
					</view>
				</view>

			</view>
			<image :src="goodsInfo.imageUrl" class='headerImageSize' mode=""></image>
		</view>


		<view class='title elliptical2'>
			{{goodsInfo.goodsName}}
		</view>


		<view class="room">
			<view class="left">
				拍室号：<span style='color:#FF3C2D'>{{goodsInfo.roomNo}}</span>
			</view>

			<view class="right">
				<view class="oldPrice">
					起始价：<span>{{goodsInfo.startPrice}}</span>
				</view>

				<view class="newPrice">
					<image src="@/static/statc-icon/image-7.png" class='iconsize' mode=""></image>
					<view class="price">
						{{goodsInfo.nowPrice}}
					</view>
				</view>
			</view>
		</view>

		<view class="box">
			<view class="box-item">
				数量：<span>{{goodsInfo.releaseAmount}}</span>
			</view>
			<view class="box-item">
				提货价：<span>{{goodsInfo.endPrice}}</span>
			</view>
			<view class="box-item">
				市场价：<span>{{goodsInfo.originalPrice}}</span>
			</view>
		</view>
		<view class="rowBox" v-if='goodsInfo.spec'>
			参数：<span>{{goodsInfo.spec}}</span>
		</view>
		<view class="rowBox">
			付款时间：<span>落槌即付</span>
		</view>
		<view class="subTitle">
			涨幅须知
		</view>
		<view class="updown">
			<view class="updownValue-item" v-for="item  in goodsInfo.priceHistoryList" :key="item.curDay">
				<view class="top1">
					{{item.curDay}}
				</view>
				<view class="value">
					￥{{item.nowPrice}}

				</view>
				<view class="ifno">
					涨幅：<span>{{item.percent}}%</span>
				</view>
			</view>
		</view>

		<view class="subTitle">
			上拍方信息
		</view>
		<view class="rowBox" v-if='goodsInfo.goodsCompany'>
			联系人：<span>{{goodsInfo.goodsCompany.contacts}}</span>
		</view>
		<view class="rowBox" v-if='goodsInfo.goodsCompany'>
			联系电话：<span>{{goodsInfo.goodsCompany.contactsPhone}}</span>
		</view>
		<view class="rowBox" v-if='goodsInfo.goodsCompany'>
			供货方：<span>{{goodsInfo.goodsCompany.companyName}}</span>
		</view>
		<view class="detail-title">宝贝详情</view>
		<view style="margin:20rpx 0 0 30rpx;width:690rpx;" v-html="html"></view>

		<view class="btn">
			<view class="options">
				<view class="options-item" :class="{'options-active':goodsInfo.goodsSessions.state==1}"
					@click="handleQuickly(1)">
					<span>流转</span> <!-- 抢购 0未开始1抢购中2已结束3预约中 -->
				</view>
				<view class="options-item" :class="{'options-active':goodsInfo.goodsSessions.state==3}"
					@click="handleQuickly(2)">
					<span>易货</span> <!-- 预约 0未开始1抢购中2已结束3预约中 -->
				</view>
			</view>

		</view>


		<uni-popup type='bottom' :mask-click="false" ref='weipai'>
			<view class="weipai">
				<image src="@/static/statc-icon/close.png" class='icon' @tap='handleClosePopup' mode=""></image>
				<view class="header">
					商品流转
				</view>

				<view class="content">
					<image :src="goodsInfo.imageUrl" class='prodImage' mode=""></image>
					<view class="left">
						<view class="titlePopup elliptical2">
							{{goodsInfo.goodsName}}
						</view>
						<view class="options-poup">
							<view class="countDown">
								<!-- <image src="@/static/statc-icon/image-10.png" class='updownicon' @click="upDown('down')"
									mode=""></image> -->
								数量：
								<view class="num">
									{{num}}
								</view>
								<!-- <image src="@/static/statc-icon/image-9.png" class='updownicon' @click="upDown('up')"
									mode=""></image> -->
							</view>

							<!-- 	<view class="allbtn-popup">
								全部
							</view> -->
						</view>

						<view class="pricePopup">
							{{goodsInfo.nowPrice}}
						</view>

					</view>

				</view>
				<view class="popupBtn" @click='handleSellGoods0214'>
					确认并委托流转
				</view>
			</view>

		</uni-popup>


		<uni-popup ref='canpai' type='bottom' :mask-click="false">
			<view class="weipai canpai">
				<image src="@/static/statc-icon/close.png" @tap='handleClosePopup' class='icon' mode=""></image>
				<view class="header">
					商品易货
				</view>
				<addressComVue ref='addressCom' />
				<view class="content">
					<image :src="goodsInfo.imageUrl" class='prodImage' mode=""></image>
					<view class="left">
						<view class="titlePopup elliptical2">
							{{goodsInfo.goodsName}}
						</view>
						<view class="options-poup">
							<view class="countDown">
								<image src="@/static/statc-icon/image-10.png" class='updownicon' @click="upDown('down')"
									mode=""></image>
								<input class='num' type="number" @input="valueFormat" v-model="num"> </input>
								<image src="@/static/statc-icon/image-9.png" class='updownicon' @click="upDown('up')"
									mode=""></image>
							</view>

							<view class="allbtn-popup" @click='handleAllNum(2,goodsInfo.nowPrice)'>
								全部
							</view>
						</view>

						<view class="pricePopup">
							{{goodsInfo.nowPrice}}
						</view>

					</view>

				</view>
				<view class="payWay-popup">
					<view class="label">
						支付方式
					</view>
					<view class="way_items">
						<view class="way-item " :class='{"way-item-active":walletType ==1}'
							@click='walletType =1,num=1'>
							多多券
						</view>
						<view class="way-item " :class='{"way-item-active":walletType ==2}'
							@click='walletType =2,num=1'>
							快乐豆
						</view>
						<view class="way-item " :class='{"way-item-active":walletType ==3}'
							@click='walletType =3,num=1'>
							组合付款
						</view>
					</view>
				</view>
				<view class="popupBtn" @click='handleSubmitCanPai'>
					确认并支付订单
				</view>
			</view>
		</uni-popup>
		<passWordPopup :show='isProp' @close='isProp=false' @callBack="sure" />
	</view>
</template>

<script>
	import passWordPopup from "@/components/basicComponents/passWordPopup.vue"
	import addressComVue from "@/components/basicComponents/addressCom.vue"
	import {
		getGoodsAndSessionsDetailInfo,
		userBalance,
		addressList,
		myUserGoodsNum0214,
		appointment0214,
		sellGoods0214
	} from "@/api/api.js"
	export default {
		name: 'quicklyPage',
		components: {
			addressComVue,
			passWordPopup
		},
		data() {
			return {
				isProp: false,
				goodsInfo: {},
				num: 1,
				walletType: 1,
				balance: 0,
				happyBean: 0,
				html: '',
			}
		},

		onLoad(e) {
			this.handleGetGoodsAndSessionsDetailInfo({
				goodId: e.id
			})
		},
		onShow() {
			this.$refs.addressCom ? this.$refs.addressCom.getAddressList() : ''
		},
		methods: {
			valueFormat(event) {
				const value = event.target.value;
				if (value === '' || /^[1-9]\d*$/.test(value)) {
					this.num = value;
				} else {
					// 如果不符合条件，可以设置一个默认值或者不更新数据模型
					this.num = ''; // 清空输入或设置为上一个有效值
				}
			},
			handleSellGoods0214() {
				if(this.num<=1){
					uni.showToast({
						title:'请选择正确的交易数量',
						icon:'none'
					})
					return
				}
				sellGoods0214({
					goodsId: this.goodsInfo.id,
					quantity: this.num
				}).then(res => {
					console.log('sellGoods0214', res)
					if (res.code == 200) {

						uni.showToast({
							title: '操作成功',
							icon: 'none',

						})
						this.handleClosePopup()
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}, 500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}

				})
			},
			handleGetMyAppointment0214() {
				myUserGoodsNum0214({
					goodsId: this.goodsInfo.id
				}).then(res => {
					console.log('getMyAppointment0214', res)
					this.num = res.data.profitNum
				})
			},
			sure(payPassword) {
				this.handleAppointment0214(payPassword)
			},
			handleAppointment0214(payPassword) {
				// console.log(this.$refs.addressCom)
				if(this.num<=0){
					uni.showToast({
						title:'请选择正确的交易数量',
						icon:'none'
					})
					return
				}
				// 商品易货-预约接口
				appointment0214({
					addressId: this.$refs.addressCom.$data.addressId,
					goodsId: this.goodsInfo.id,
					payPassword: payPassword,
					walletType: this.walletType,
					quantity: this.num
				}).then(res => {
					this.isProp = false
					console.log('res', res)
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none',
						})
						this.handleClosePopup()
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}, 500)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				})
			},

			handleNumber(dividend, nowPrice) {
				let num = 0
				if (this.walletType == 1) {
					num = Math.floor(dividend.balance / nowPrice)
				}
				if (this.walletType == 2) {
					num = Math.floor(dividend.happyBean / nowPrice)
				}
				if (this.walletType == 3) {
					num = Math.floor((dividend.happyBean + dividend.balance) / nowPrice)
				}

				this.num = num
			},
			handleAllNum(type, nowPrice) {
				if (type == 2) {
					// 查询账户的多多券

					this.handleUserBalance(type, nowPrice)
				}
			},
			handleUserBalance(type, nowPrice) {
				userBalance().then(res => {

					// this.balance = res.data.balance
					if (type == 2) {
						this.handleNumber(res.data, nowPrice)
					}

					// this.happyBean = res.data.happyBean
				})
			},
			upDown(option) {
				if (option == 'down') {
					this.num--;
					if (this.num <= 1) {
						this.num = 1
					}

				}

				if (option == 'up') {
					this.num++;
				}

			},
			handleQuickly(state) {
				this.num = 1
				if (state == 1 && this.goodsInfo.goodsSessions.state == 1) {
					// 委派

					this.$refs.weipai.open('bottom')
					this.handleGetMyAppointment0214()
				}
				if (state == 2 && this.goodsInfo.goodsSessions.state == 3) {
					// 易货

					this.$refs.canpai.open('bottom')
				}
			},
			handleGetGoodsAndSessionsDetailInfo(paramer) {
				getGoodsAndSessionsDetailInfo(paramer).then(res => {
					console.log('getGoodsAndSessionsDetailInfo', res)
					if (res.code == 200) {
						var regex = new RegExp('<img ', 'gi')
						this.html = res.data.detail.replace(regex, '<img style="width: 100%;" ');
						this.goodsInfo = res.data
					} else {
						this.goodsInfo = {}
					}
				})
			},
			handleClosePopup() {
				this.$refs.weipai.close()
				this.$refs.canpai.close()

			},
			handleSubmitCanPai() {
				// this.$refs.canpai.close()
				this.isProp = true
			}
		}
	}
</script>

<style lang="less" scoped>
	.quicklyPage {

		padding-bottom: 200rpx;
		box-sizing: border-box;

		.quicklyHeaderImage {
			position: relative;

			.navigation_bar {
				width: 100vw;
				height: 80rpx;
				display: flex;
				align-items: center;
				padding: 26rpx 20rpx;
				box-sizing: border-box;
				background: transparent;
				display: flex;
				justify-content: space-between;
				position: absolute;
				top: 0;
				z-index: 10;
			}


			.headerImageSize {
				width: 100vw;
				height: 750rpx;

			}

			.quicklyPageTime {
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 10;
				width: 100%;
				height: 116rpx;
				background: url("@/static/static-home/image-46.png") no-repeat;
				background-size: 100% 100%;
				display: grid;
				grid-template-columns: repeat(2, 1fr);

				.quicklyPageTime-item {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.label {
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-bottom: 20rpx;
					}

					.value {
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}


		}

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #3C3C3C;
			margin-top: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			line-height: 40rpx;
			margin-bottom: 20rpx;
		}

		.room {
			display: flex;
			justify-content: space-between;
			margin: 0 20rpx;

			.left {
				display: flex;
				font-weight: 400;
				font-size: 28rpx;
				color: #3C3C3C;

				span {
					font-weight: Bold;
					font-size: 28rpx;
					color: #000;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.oldPrice {
					font-weight: 400;
					font-size: 20rpx;
					color: #898989;
					margin-right: 16rpx;

					span {
						font-weight: bold;
						font-size: 20rpx;
						color: #3C3C3C;
					}
				}

				.newPrice {
					display: flex;
					align-items: center;

					.iconsize {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}

					.price {
						font-weight: bold;
						font-size: 40rpx;
						color: #FF3C2D;
					}
				}
			}
		}

		.box {
			display: flex;
			align-items: center;
			margin: 20rpx;

			.box-item {
				padding: 16rpx 20rpx;
				box-sizing: border-box;
				height: 64rpx;
				background: #F8FAFB;
				border-radius: 6rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #3C3C3C;

				span {
					font-size: bold;
					color: #3C3C3C;
				}

			}

			.box-item:not(:last-child) {
				margin-right: 20rpx;
			}
		}

		.rowBox {
			padding: 16rpx 20rpx;
			box-sizing: border-box;
			background: #F8FAFB;
			border-radius: 6rpx;

			height: 64rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #3C3C3C;
			margin: 20rpx;
			display: flex;
			align-items: center;

			span {
				font-size: bold;
				color: #3C3C3C;
			}
		}

		.subTitle {
			font-weight: bold;
			font-size: 28rpx;
			color: #3C3C3C;
			margin: 20rpx 40rpx;
		}

		.updown {
			width: 710rpx;
			height: 152rpx;
			background: #F8FAFB;
			border-radius: 12rpx;
			margin: 0 20rpx;
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			.updownValue-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.top1 {
					font-weight: 500;
					font-size: 24rpx;
					color: #3C3C3C;
				}

				.value {
					font-weight: bold;
					font-size: 24rpx;
					color: #FF3C2D;
					margin: 20rpx 0;
				}

				.ifno {
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;

					span {
						color: #FF3C2D;
					}
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0px -6rpx 8rpx 0px rgba(199, 199, 199, 0.25);
			border-top-right-radius: 50rpx;
			border-top-left-radius: 50rpx;

			.options {
				width: 670rpx;
				height: 88rpx;
				background-color: #D8FFE2;
				margin: 10rpx auto;
				border-radius: 80rpx;
				display: flex;
				justify-content: space-between;

				.options-item {
					width: 50%;
					height: 88rpx;
					border-radius: 88rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					span {
						font-weight: 400;
						font-size: 36rpx;
						color: #7E7E7E;
						position: absolute;
						z-index: 11;
					}
				}

				.options-active::before {
					content: '';
					width: 334rpx;
					height: 80rpx;
					background: linear-gradient( 90deg, #00C538 0%, #12CB45 100%);
					border-radius: 112rpx;
					position: absolute;
					z-index: 10;
				}

				.options-active span {
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}
		}


		.weipai {
			width: 100%;
			height: 556rpx;
			background: #FFFFFF;
			position: relative;
			border-top-right-radius: 50rpx;
			border-top-left-radius: 50rpx;

			.icon {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 32rpx;
				right: 46rpx;
			}

			.header {
				width: 100%;
				height: 88rpx;
				background: #FFFFFF;
				box-shadow: 0px 2rpx 2rpx 0px rgba(167, 167, 167, 0.25);
				padding: 16rpx 40rpx;
				box-sizing: border-box;
				// border-bottom: 2rpx solid #A7A7A7;
				display: flex;
				align-items: center;
				border-top-right-radius: 50rpx;
				border-top-left-radius: 50rpx;
			}

			.content {
				display: flex;
				padding: 40rpx;

				.prodImage {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.left {
					flex: 1;
					display: flex;
					flex-direction: column;
					font-weight: bold;
					font-size: 28rpx;
					color: #3C3C3C;
					span{
						color: #00C538;
					}

					.titlePopup {
						font-weight: bold;
						font-size: 28rpx;
						color: #3C3C3C;
						margin-bottom: 20rpx;
						height: 58rpx;
					}

					.options-poup {
						display: flex;
						align-items: center;

						.allbtn-popup {
							width: 124rpx;
							height: 48rpx;
							background: #00C538;
							border-radius: 40rpx;
							font-weight: bold;
							font-size: 24rpx;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-left: 20rpx;
						}
					}

					.countDown {
						display: flex;
						align-items: center;

						.num {
							width: 132rpx;
							height: 56rpx;
							background: #FFFFFF;
							border: 2rpx solid #F7F7F7;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							text-align: center;
						}

						.updownicon {
							width: 56rpx;
							height: 56rpx;

						}
					}

					.pricePopup {
						font-weight: bold;
						font-size: 40rpx;
						color: #FF3C2D;
						margin-top: 20rpx;
					}

					.pricePopup:before {
						content: "预售￥";
						font-weight: bold;
						font-size: 20rpx;
						color: #FF3C2D;
					}

				}
			}

			.popupBtn {
				width: 670rpx;
				height: 88rpx;
				background: #00C538; //linear-gradient(90deg, #FF7A3F 0%, #FC3260 100%);
				border-radius: 112rpx;
				margin: 0 auto;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.canpai {
			height: 940rpx;

			.payWay-popup {
				display: flex;
				flex-direction: column;
				margin: 0 40rpx;
				margin-bottom: 100rpx;

				.label {
					font-weight: 400;
					font-size: 28rpx;
					color: #3C3C3C;
					margin-bottom: 20rpx;
				}

				.way_items {
					display: grid;
					grid-template-columns: repeat(3, 1fr);

					.way-item {
						display: flex;
						width: 210rpx;
						height: 88rpx;
						background: #F5F5F5;
						border-radius: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 32rpx;
						color: #BCBDBD;
						border: 2rpx solid #F5F5F5;
					}

					.way-item-active {
						border: 2rpx solid #00C538;
						background: #F9FFFB;
						font-weight: 600;
						font-size: 32rpx;
						color: #00C538;
						position: relative;
					}

					.way-item-active:before {
						content: '';
						width: 48rpx;
						height: 28rpx;
						background: url("@/static/statc-icon/image-8.png") no-repeat;
						background-size: 100% 100%;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}

			}

		}
	}

	.detail-title {
		margin: 40rpx 0 0 30rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1A1A1A;
		line-height: 50rpx;
	}
</style>